<template>
  <div class="container">
    <div class="login">
      <div class="login-form">
        <!-- logo -->
        <div class="logo"></div>
        <!-- 登录表单 -->
        <!-- 
            model: 引用表单数据
            rules: 引用表单校验规则对象
         -->
        <el-form
          :model="account"
          status-icon
          :rules="rules"
          ref="adminForm"
          class="admin-login-form"
        >
          <!-- prop: 指定表单校验错误提示消息的显示位置 -->
          <el-form-item prop="username">
            <el-input
              v-model="account.username"
              autocomplete="off"
              placeholder="请输入登录账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="account.password"
              autocomplete="off"
              placeholder="请输入登录密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn-login"
              round
              type="primary"
              @click="submitForm"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      account: {
        username: "admin",
        password: "admin888",
      },
      // 表单校验规则
      rules: {
        // required: 必填项; message: 错误提示消息; trigger: 执行表单校验的时机
        username: { required: true, message: "请输入账号", trigger: "blur" },
        password: { required: true, message: "请输入密码", trigger: "blur" },
      },
    };
  },
  methods: {
    submitForm() {
      // validate: 是el-form组件提供的, 进行表单校验, 需要一个匿名处理函数作为参数,
      //  在该处理函数中系统会在自动注入一个布尔类型参数valid, 如果为true表示表单校验通过, 否则表示表单校验未通过
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          this.$axios.post("/userlogin", this.account).then((res) => {
            if (res.code === 200) {
              // 1-成功提示
              this.$message({
                type: "success",
                message: res.msg,
              });
              // 2-将登录信息写入本地存储
              localStorage.setItem("adminInfo", JSON.stringify(res.list));
              // 3-自动跳转到管理中心
              const url=this.$route.query.url?this.$route.query.url:'/home';
              this.$router.push(url);
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
@import "../assets/css/common.css";
.container {
  /* 
    vh: viewport height 相对单位, 100vh=屏幕高度
    vw: viewport width 相对单位, 100vw=屏幕宽度
  */
  height: 100vh;
  min-width: 1000px;
  min-height: 600px;
  background: linear-gradient(to bottom, #ff674b, #ff7967);
}
.login {
  position: relative;
  width: 1000px;
  height: 100%;
  min-height: 600px;
  margin: auto;
  background: url("../assets/imgs/loginbg.png") no-repeat center center;
  background-size: contain;
}
.login-form {
  position: absolute;
  right: 138px;
  top: 74px;
  width: 410px;
}
.logo {
  width: 100%;
  height: 120px;
  background: url("../assets/imgs/logo.png") no-repeat center center;
  background-size: 90% 90%;
}
.admin-login-form {
  margin: 0 10px;
  margin-top: 100px;
}
.btn-login {
  width: 100%;
}
</style>